<div
  data-controller="confirmation-modal"
  data-confirmation-modal-root-selector-value="#confirmation-modal-root"
  data-confirmation-modal-content-selector-value="#confirmation-modal"
  data-confirmation-modal-title-value="Confirm changes"
  data-confirmation-modal-size-value="m">
  <div class="crayons-notice crayons-notice--warning mb-4">
    <strong>Note: If you remove a badge that is automatically rewarded it will simply be re-awarded despite being removed.</strong>
  </div>

  <div class="flex crayons-card crayons-card--secondary p-2">
    <div>
      <%= link_to "Award Badge", admin_badge_achievements_award_badges_path, class: "c-link c-link--branded c-link--block" %>
    </div>
    <div class="ml-auto">
      <%= search_form_for @q, url: admin_badge_achievements_path, class: "flex flex-row gap-1 items-center" do |f| %>
        <div class="crayons-field flex-row items-center gap-2">
          <%= f.label :user_id_eq, "Search by user ID", class: "crayons-field__label whitespace-nowrap" %>
          <%= f.search_field :user_id_eq, placeholder: "1234", class: "crayons-textfield mt-0" %>
        </div>
        <%= f.submit "Search", class: "c-btn" %>
      <% end %>
    </div>
  </div>

  <table class="crayons-table mt-2" width="100%">
    <thead>
      <tr>
        <th scope="col">User ID</th>
        <th scope="col">User</th>
        <th scope="col">Badge</th>
        <th scope="col">Badge Image</th>
      </tr>
    </thead>
    <tbody class="crayons-card">
    <% @badge_achievements.each do |badge_achievement| %>
      <tr data-row-id="<%= badge_achievement.id %>">
        <td class="whitespace-nowrap"><%= badge_achievement.user.id %></td>
        <td><%= badge_achievement.user.username %></td>
        <td><%= badge_achievement.badge.title %></td>
        <td class="justify-center">
          <img class="mx-auto mt-3" width="40" height="40" src="<%= badge_achievement.badge.badge_image %>" alt="badge image" loading="lazy" />
        </td>
        <td>
          <button
            class="crayons-btn crayons-btn--danger"
            data-item-id="<%= badge_achievement.id %>"
            data-endpoint="/admin/content_manager/badge_achievements"
            data-username="<%= current_user.username %>"
            data-action="click->confirmation-modal#openModal">Remove</button>
        </td>
      </tr>
      <% end %>
    </tbody>
  </table>
  <%= render partial: "admin/shared/destroy_confirmation_modal" %>
</div>
